<template>
  <form @submit.prevent="submitForm" class="form-section">
    <div class="form-container">
      <div v-if="localIfVisiable || !show_if" class="show_v" v-loading="loading" element-loading-text="智能算法运算中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="double-container">
          <div class="inputs-container">
            <div class=title_right>
              <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
              <span class="text1">容量评估输入参数</span>
            </div>
            <div class="form-item">
              <label for="detailed">{{ type }}</label>
              <!-- <input type="text" id="type"
                :value="localSelectedRow && localSelectedRow.regionType ? localSelectedRow.regionType : '默认值'"
                class="select-right" readonly style="padding-left: 1.2rem;" /> -->
              <input type="text" id="type" v-model="localSelectedRow.regionIndex" class="select-right" readonly
                style="padding-left: 1.2rem;" />
            </div>
            <div v-if=label1 class="form-item">
              <label for="label1">{{ label1 }}</label>
              <input type="text" id="label1" v-model="localSelectedRow.label" :placeholder="isRoute ? '20' : '默认值'"
                class="select-right" style="padding-left: 1.2rem;" />
              <span class="num_l">{{ label1_l }}</span>
            </div>
            <div v-if=label2 class="form-item">
              <label for="label2">{{ label2 }}</label>
              <input type="text" id="label2" v-model="localSelectedRow.label2" :placeholder="isRoute ? '1' : '默认值'"
                class="select-right" style="padding-left: 1.2rem;" />
              <span class="num_l">{{ label2_l }}</span>
            </div>
            <div v-if=airspace class="form-item">
              <label for="airspace">{{ airspace }}</label>
              <input type="text" id="airspace"
                :value="localSelectedRow && localSelectedRow.airspaceRange ? localSelectedRow.airspaceRange : '默认值'"
                class="select-right" style="padding-left: 1.2rem;" />
              <span class="num_l">{{ airspace_l }}</span>
            </div>
            <div v-if=accLabel class="form-item">
              <label for="accLabel">{{ accLabel }}</label>
              <input type="text" id="accLabel" v-model="localSelectedRow.naviAccuracyError"
                :placeholder="isRoute ? '2' : '默认值'" class="select-right" style="padding-left: 1.2rem;" />
              <span class="num_l">{{ accLabel_l }}</span>
            </div>
            <div v-if="monitor_num != ''" class="form-item">
              <label for="monitor_num">{{ monitor_num }}</label>
              <input type="text" id="monitor_num" v-model="localSelectedRow.monitoringCapacity"
                :placeholder="isRoute ? '1' : '默认值'" class="select-right" style="padding-left: 1.2rem;" />
              <span class="num_l">{{ monitor_num_l }}</span>
            </div>
            <div v-if="isRoute" class="form-item">
              <label>评估版本</label>
              <select v-model="formData.version" class="select-right">
                <option value="v1">控制放行时间(v1)</option>
                <option value="v2">控制航空器速度(v2)</option>
              </select>
            </div>
            <div class="form-item">
              <label for="safedis">{{ safedis }}</label>
              <button type="button" @click="showtable_p()" class="button2">查看安全间隔</button>
            </div>
          </div>
          <div class="image-display">
            <div class=title_right1>
              <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
              <span class="text1">容量评估值</span>
            </div>
            <div class="form-item2">
              <label for="cal_result_static">静态容量</label>
              <input type="number" v-model="cal_result_static" id="cal_result_static" class="select-right" readonly
                style="padding-left: 1.2rem;" />
              <span class="num_l">架次</span>
            </div>
            <div class="form-item2">
              <label for="cal_result_15min">动态容量</label>
              <input type="number" v-model="cal_result_15min" id="cal_result_15min" class="select-right" readonly
                style="padding-left: 1.2rem;" />
              <span class="num_l">架次/15min</span>
            </div>
            <div class="form-item2">
              <label for="cal_result_1h">动态容量</label>
              <input type="number" v-model="cal_result_1h" id="cal_result_1h" class="select-right" readonly
                style="padding-left: 1.2rem;" />
              <span class="num_l">架次/1h</span>
            </div>
          </div>
        </div>
        <div class="form-item1">
          <button type="submit" @click="checkandreturn(post_ui)" class="button1">运行</button>
          <button type="button" @click="submitForm()" class="button1">确认</button>
          <button type="button" @click="resetForm()" class="button1">重置</button>
        </div>
      </div>
      <div v-if="!localIfVisiable && show_if" class="double-container">
        <div class="plat_total">
          <div class="title_plat">
            <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
            <span class="text_form">横向安全间隔（m）</span>
          </div>
          <div class="platform">
            <ManagementPlatform :aircraftTypes="[
              // { name: 'I 航空器类型', values: this.showlist1 },
              // { name: 'II 航空器类型', values: this.showlist2 },
              // { name: 'III 航空器类型', values: this.showlist3 },
              // { name: 'IV 航空器类型', values: this.showlist4 }
              { name: '小型机', values: this.showlist1 },
              { name: '中型机', values: this.showlist2 },
              { name: '大型机', values: this.showlist3 },
              { name: '复合翼', values: this.showlist4 }
            ]" />
          </div>
          <div class="title_plat">
            <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
            <span class="text_form">纵向安全间隔（m）</span>
          </div>
          <div class="platform">
            <ManagementPlatform :aircraftTypes="[
              // { name: 'I 航空器类型', values: this.showlist5 },
              // { name: 'II 航空器类型', values: this.showlist6 },
              // { name: 'III 航空器类型', values: this.showlist7 },
              // { name: 'IV 航空器类型', values: this.showlist8 }
              { name: '小型机', values: this.showlist5 },
              { name: '中型机', values: this.showlist6 },
              { name: '大型机', values: this.showlist7 },
              { name: '复合翼', values: this.showlist8 }
            ]" />
          </div>
          <div class="title_plat">
            <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
            <span class="text_form">垂直安全间隔（m）</span>
          </div>
          <div class="platform">
            <ManagementPlatform :aircraftTypes="[
              // { name: 'I 航空器', values: this.showlist9 },
              // { name: 'II 航空器类型', values: this.showlist10 },
              // { name: 'III 航空器类型', values: this.showlist11 },
              // { name: 'IV 航空器类型', values: this.showlist12 }
              { name: '小型机', values: this.showlist9 },
              { name: '中型机', values: this.showlist10 },
              { name: '大型机', values: this.showlist11 },
              { name: '复合翼', values: this.showlist12 }
            ]" />
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import axios from 'axios';
import ManagementPlatform from '@/components/plat_table.vue';

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE4;

export default {
  name: 'FormComponent',
  components: {
    ManagementPlatform,
  },
  props: {
    // formData: {
    //   type: Object,
    //   required: true,
    // },
    type: {
      type: String,
      required: true
    },
    label1: {
      type: String,
      required: true
    },
    airspace: {
      type: String,
    },
    airspace_l: {
      type: String,
    },
    label1_l: {
      type: String,
      required: true
    },
    label2: {
      type: String,
      required: true
    },
    label2_l: {
      type: String,
      required: true
    },
    label3: {
      type: String,
    },
    cal_result: {
      type: Number,
    },
    safedis: {
      type: String,
      default: '可用飞行高度'
    },
    object_post: {
      type: Object,
    },
    monitor_num: {
      type: String,
    },
    monitor_num_l: {
      type: String,
    },
    accLabel: {
      type: String,
    },
    accLabel_l: {
      type: String,
    },
    selectedRow: {
      type: Object
    },
    post_ui: {
      type: String
    },
    update_ui: {
      type: String
    },
    safety_ui: {
      type: String
    },
    if_visiable: {
      type: Boolean
    },
    show_if: {
      type: Boolean
    },
  },
  data() {
    return {
      cal_result_15min: "——",
      cal_result_1h: "——",
      cal_result_static: null,
      localSelectedRow: { ...this.selectedRow },
      localIfVisiable: true,
      showlist1: [],
      showlist2: [],
      showlist3: [],
      showlist4: [],
      showlist5: [],
      showlist7: [],
      showlist6: [],
      showlist8: [],
      showlist9: [],
      showlist10: [],
      showlist11: [],
      showlist12: [],
      showlist13: [],
      showlist14: [],
      showlist15: [],
      showlist16: [],
      splitData: [],
      formData1: {
        type: Object,
      },
      loading: false,
      formData: {
        version: 'v1'  // 默认选择v1
      },
      defaultValues: {
        route: {
          // 航路的默认值
          repeatTime: 1,
          version: 'v1',
          releaseTime: 2,
          DMargin: 1,
          stepT: 1
        },
        updown: {
          // 起降区的默认值
          repeatTime: 1,
          version: 'v1',
          releaseTime: 2,
          DMargin: 1,
          stepT: 1
        },
        task: {
          // 作业区的默认值
          repeatTime: 1,
          version: 'v1',
          releaseTime: 2,
          DMargin: 1,
          stepT: 1
        }
      },
    };
  },
  computed: {
    cal_result_15minDisplay() {
      return this.cal_result_15min === null ? '——' : this.cal_result_15min;
    },
    isRoute() {
      // 根据父组件传入的类型判断是否为航路
      return this.$parent.selectedButton === 'route'
    },
  },
  watch: {
    if_visiable: {
      handler() {
        this.localIfVisiable = this.if_visiable;
        console.log("初步条件", this.if_visiable)
      },
      immediate: true,  // 确保初始值也会同步
    },
    selectedRow: {
      handler(newVal) {
        this.localSelectedRow = { ...newVal };
        this.localIfVisiable = this.if_visiable;
        this.cal_result_static = null;
        this.cal_result_15min = null;
        this.cal_result_1h = null;
      },
      immediate: true
    },
    // 监听父组件类型变化，自动重置表单
    '$parent.selectedButton': {
      handler(newVal) {
        this.resetForm()
      },
      immediate: true
    }
  },
  methods: {
    resetForm() {
      // 根据当前选择的类型设置对应的默认值
      const type = this.$parent.selectedButton
      if (type === 'route') {
        this.formData = { ...this.defaultValues.route }
      } else if (type === 'updown') {
        this.formData = { ...this.defaultValues.updown }
      } else if (type === 'task') {
        this.formData = { ...this.defaultValues.task }
      }
      this.$emit('reset');
    },
    async checkandreturn(post_ui) {
      let param = {};
      console.log('object_post', this.object_post);
      try {
        if (this.isRoute) {
          param = {
            // ...this.object_post,
            objectId: this.object_post.objectId,
            version: [this.formData.version], // 从选择框获取版本
            repeatTime: Number(this.localSelectedRow.label) || 20,  // 使用已有的 label 值作为重复次数
            stepT: Number(this.localSelectedRow.label2) || 1,      // 使用已有的 label2 值作为仿真步长
            releaseTime: Number(this.localSelectedRow.naviAccuracyError) || 2,  // 释放时间使用 naviAccuracyError
            dMargin: Number(this.localSelectedRow.monitoringCapacity) || 1     // 安全间隔裕量使用 monitoringCapacity
            // numUavs: 5, // 你也可以绑定到 UI 控件
          };
        } else {
          if (!this.object_post.taskType && !this.object_post.airspaceRange && this.object_post.label2) {
            param = {
              id: this.object_post.id,
              regionIndex: this.object_post.regionIndex,
              dataSource: this.object_post.dataSource,
              regionType: this.object_post.regionType,
              latitude: this.object_post.latitude,
              longitude: this.object_post.longitude,
              altitude: this.object_post.altitude,
              label: this.object_post.label,
              availableFlightLevel: this.object_post.availableFlightLevel,
              aircraftType: this.object_post.aircraftType,
              safeIntervalType: this.object_post.safeIntervalType,
              airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
              reservedField1: this.object_post.reservedField1,
              reservedField2: this.object_post.reservedField2,
              reservedField3: this.object_post.reservedField3,
              min15CapacityEvalResult: this.object_post.min15CapacityEvalResult,
              h1CapacityEvalResult: this.object_post.h1CapacityEvalResult,
              safeIntervalRepo: this.object_post.safeIntervalRepo,
              staticCapacityEvalResult: this.object_post.staticCapacityEvalResult,
              naviAccuracyError: this.object_post.naviAccuracyError,
              monitoringCapacity: this.object_post.monitoringCapacity,
              label2: this.object_post.label2,
            };
          };
          if (this.object_post.taskType && this.object_post.airspaceRange) {
            const param = {
              id: this.object_post.id,
              regionIndex: this.object_post.regionIndex,
              dataSource: this.object_post.dataSource,
              regionType: this.object_post.regionType,
              taskType: this.object_post.taskType,
              airspaceRange: this.object_post.airspaceRange,
              availableFlightLevel: this.object_post.availableFlightLevel,
              label: this.object_post.label,
              aircraftType: this.object_post.aircraftType,
              operatingHeightInterval: this.object_post.operatingHeightInterval,
              safeIntervalStandard: this.object_post.safeIntervalStandard,
              airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
              naviAccuracyError: this.object_post.naviAccuracyError,
              monitoringCapacity: this.object_post.monitoringCapacity,
              reservedField1: this.object_post.reservedField1,
              reservedField2: this.object_post.reservedField2,
              reservedField3: this.object_post.reservedField3,
              min15CapacityEvalResult: this.object_post.min15CapacityEvalResult,
              h1CapacityEvalResult: this.object_post.h1CapacityEvalResult,
              safeIntervalRepo: this.object_post.safeIntervalRepo,
              staticCapacityEvalResult: this.object_post.staticCapacityEvalResult,
              label2: this.object_post.label2,
            };
          };
          if (
            (!this.selectedRow.label2 || this.selectedRow.label2 === '') &&
            this.object_post.id) {
            const param = {
              id: this.object_post.id,
              regionIndex: this.object_post.regionIndex,
              dataSource: this.object_post.dataSource,
              regionType: this.object_post.regionType,
              airspaceRange: this.object_post.airspaceRange,
              label: this.object_post.label,
              aircraftType: this.object_post.aircraftType,
              safeIntervalStandard: this.object_post.safeIntervalStandard,
              airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
              naviAccuracyError: this.object_post.naviAccuracyError,
              monitoringCapacity: this.object_post.monitoringCapacity,
              reservedField1: this.object_post.reservedField1,
              reservedField2: this.object_post.reservedField2,
              reservedField3: this.object_post.reservedField3,
              min15CapacityEvalResult: this.object_post.min15CapacityEvalResult,
              h1CapacityEvalResult: this.object_post.h1CapacityEvalResult,
              safeIntervalRepo: this.object_post.safeIntervalRepo,
              staticCapacityEvalResult: this.object_post.staticCapacityEvalResult,
            };
          };
        }
        // 输出构建的请求体
        console.log("构建的请求体:", param);
        console.log("post_ui", post_ui);

        // 设置 loading 状态为 true
        this.loading = true;

        // 发起 POST 请求
        const response = await axios.post(post_ui, param);
        // 检查请求是否成功并获取返回的数据
        if (response.data) {
          // 使用 setTimeout 来控制 loading 状态消失
          setTimeout(() => {
            this.loading = false;
          }, 500); // 0.5秒

          console.log('后端返回的运行后的response.data', response.data)
          // this.cal_result_static = response.data.data.staticCapacityEvalResult;
          // this.cal_result_15min = response.data.data.min15CapacityEvalResult;
          // this.cal_result_1h = response.data.data.h1CapacityEvalResult;
          // 判断是否是“航路”模式
          if (this.isRoute) {
            const result = response.data.data;
            // this.cal_result_static = result.staticCapacity;
            // this.cal_result_15min = result.dynamicCapacity15;
            // this.cal_result_1h = result.dynamicCapacity60;

            // 保留两位小数
            this.cal_result_static = parseFloat(Number(result.staticCapacity).toFixed(2));
            this.cal_result_15min = parseFloat(Number(result.dynamicCapacity15).toFixed(2));
            this.cal_result_1h = parseFloat(Number(result.dynamicCapacity60).toFixed(2));
          } else {
            const result = response.data.data;
            this.cal_result_static = result.staticCapacityEvalResult;
            this.cal_result_15min = result.min15CapacityEvalResult;
            this.cal_result_1h = result.h1CapacityEvalResult;
          }
        } else {
          console.error('请求成功，但返回的数据格式不正确', response.data);
        }
      } catch (error) {
        console.error('请求失败', error);
        this.loading = false; // 请求失败时也要停止 loading
      }

    },
    async submitForm() {
      let param1 = {};
      let update_ui = '';
      try {
        if (!this.object_post.taskType && !this.object_post.airspaceRange && this.object_post.label2) {
          param1 = {
            //起降
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType: this.object_post.regionType,
            latitude: this.object_post.latitude,
            longitude: this.object_post.longitude,
            altitude: this.object_post.altitude,
            label: this.object_post.label,
            availableFlightLevel: this.object_post.availableFlightLevel,
            aircraftType: this.object_post.aircraftType,
            safeIntervalType: this.object_post.safeIntervalType,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.cal_result_15min,
            h1CapacityEvalResult: this.cal_result_1h,
            staticCapacityEvalResult: this.cal_result_static,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            naviAccuracyError: this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            label2: this.object_post.label2,
          };
          // update_ui='http://47.99.75.194:8084/takeoffland/update';
          update_ui = `${baseApi}/takeoffland/update`;
        };
        if (this.object_post.taskType && this.object_post.airspaceRange) {
          param1 = {
            //工作
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType: this.object_post.regionType,
            taskType: this.object_post.taskType,
            airspaceRange: this.object_post.airspaceRange,
            availableFlightLevel: this.object_post.availableFlightLevel,
            label: this.object_post.label,
            aircraftType: this.object_post.aircraftType,
            operatingHeightInterval: this.object_post.operatingHeightInterval,
            safeIntervalStandard: this.object_post.safeIntervalStandard,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            naviAccuracyError: this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.cal_result_15min,
            h1CapacityEvalResult: this.cal_result_1h,
            staticCapacityEvalResult: this.cal_result_static,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            label2: this.object_post.label2,
          };
          // update_ui='http://47.99.75.194:8084/workzone/update';
          update_ui = `${baseApi}/workzone/update`;
        };
        if (
          (!this.selectedRow.label2 || this.selectedRow.label2 === '') &&
          this.object_post.id) {
          //航路
          param1 = {
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType: this.object_post.regionType,
            airspaceRange: this.object_post.airspaceRange,
            label: this.object_post.label,
            aircraftType: this.object_post.aircraftType,
            safeIntervalStandard: this.object_post.safeIntervalStandard,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            naviAccuracyError: this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.cal_result_15min,
            h1CapacityEvalResult: this.cal_result_1h,
            staticCapacityEvalResult: this.cal_result_static,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
          };
          // update_ui='http://47.99.75.194:8084/airlane/update';
          update_ui = `${baseApi}/capacity/save`;
        };
        await axios.post(update_ui, param1);
      }
      catch (error) {
        // 处理请求失败的情况
        console.error('请求失败', error);
      }
    },
    exit() {
      this.localIfVisiable = true;
      // this.$emit('update-if-visiable', this.localIfVisiable); 
    },
    showtable_p() {
      this.localIfVisiable = false;
      console.log("弹窗开启", this.safety_ui);
      this.fetchFormData(this.safety_ui)
      if (this.showlist1 != []) {
        this.$emit('visiable_fu', this.localIfVisiable)
        this.$emit('showif_fu', true)
      }
      else {
        this.$emit('visiable_fu', true)
      }
    },
    async fetchFormData(safety_ui) {
      console.log("fetchFormData  执行")
      try {
        const response = await axios.get(safety_ui)
        console.log(response.data);
        if (response.data.code === 0) {
          this.formData1 = response.data.data;
          console.log("fetchFormData  执行完成,done")
          console.log(response.data);
        }
      }
      catch (error) {
        console.error('获取数据失败', error);
      }
      const matchedItem = this.formData1.find((item) => item.id === this.object_post.id);
      this.showlist1 = matchedItem.safeInterval[0][0];
      this.showlist2 = matchedItem.safeInterval[0][1];
      this.showlist3 = matchedItem.safeInterval[0][2];
      this.showlist4 = matchedItem.safeInterval[0][3];
      this.showlist5 = matchedItem.safeInterval[1][0];
      this.showlist6 = matchedItem.safeInterval[1][1];
      this.showlist7 = matchedItem.safeInterval[1][2];
      this.showlist8 = matchedItem.safeInterval[1][3];
      this.showlist9 = matchedItem.safeInterval[2][0];
      this.showlist10 = matchedItem.safeInterval[2][1];
      this.showlist11 = matchedItem.safeInterval[2][2];
      this.showlist12 = matchedItem.safeInterval[2][3];
    },
  }
}
</script>

<style scoped>
.form-section {
  width: 100%;
  height: 100%
}

.form-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  border: 0.0625rem solid;
  margin-top: 0.375rem;
  flex-direction: column;
  margin-left: 1%;
  position: relative;
}

.show_v {
  height: 100%;
  width: 100%;
}

.double-container {
  display: flex;
  /* flex-direction: column; */
  height: 100%;
  width: 100%;
}

.inputs-container {
  display: flex;
  flex-direction: column;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  width: 45%;
  height: 100%;

}

.form-item {
  display: flex;
  width: 100%;
  height: 5.07%;
  justify-content: flex-start;
  margin: 1.75rem 0 0 2rem;
  align-items: center;

}

.form-item label {
  width: 30%;
  text-align: right;
  font-size: 0.975rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  white-space: nowrap;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 1);
}




.select-right {
  position: relative;
  height: 2.5rem;
  width: 12.5rem;
  font-size: 0.875rem;
  background-color: rgba(0, 0, 0, 0.4);
  /* 背景色与环境一致 */
  border: none;
  /* 边框颜色 */
  border-radius: 0.25rem;
  /* 圆角样式 */
  color: #ffffff;
  /* 字体颜色 */
  margin-left: 1.25rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  box-sizing: border-box;
}

.select-right:read-only {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(250, 250, 250, 1);
}

.select-right1 {
  position: relative;
  height: 40%;
  width: 42%;
  font-size: 1.3vh;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 2px;
  color: #ffffff;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  box-sizing: border-box;
  overflow: auto;
}



.form-item1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  bottom: 13%;
  height: 4%;
  /* font-size: 4vh; */
  color: #ffffff;
  position: absolute;
  left: 45%;
  transform: translateX(-50%);
}

.capacity-title {
  width: 100%;
  font-size: 4vh;
  /* 调整为你需要的标题大小 */
  font-weight: bold;
  /* 设置字体粗细 */
  text-align: left;
  /* 确保标题与其他标题左对齐 */
  margin-bottom: 1vh;
  /* 给标题与下方内容增加适当的间距 */
  margin-top: 2vh;
  /* 给标题与上方内容增加适当的间距 */
  color: #ffffff;
  /* 你可以根据页面风格选择合适的颜色 */
}

.image-display {
  justify-content: flex-start;
  display: flex;
  width: 55%;
  height: 70%;
  gap: 5%;
  border-radius: 4px;
  background-color: transparent;
  flex-direction: column;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}

.button1 {
  background: url(../assets/img/module4/part1/button1.png) no-repeat center center, url(../assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: contain, 50%;
  color: #ffffff;
  border: none;
  padding: 0.4vh 4.7vh;
  margin-left: 4%;
  font-size: 1rem;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button1:hover {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  padding: 0.4vh 4.6vh;
  background-size: contain, 50%;
  transform: scale(1.05);
}

.button1:active {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: contain, 50%;
  padding: 0.4vh 2.6vh;
}



.button3 {
  background: url(../assets/img/module4/part1/button1.png) no-repeat center center, url(../assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: contain, 50%;
  color: #ffffff;
  border: none;
  padding: 0.4vh 4.7vh;
  margin-bottom: 2%;
  font-size: 2vh;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button3:hover {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  padding: 0.4vh 4.6vh;
  background-size: contain, 50%;
  transform: scale(1.05);
}

.button3:active {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: contain, 50%;
  padding: 0.4vh 2.6vh;
}




.button2 {
  background-color: rgba(0, 141, 255, 1);
  color: #ffffff;
  height: 2.375rem;
  width: 11.25rem;
  border-radius: 0.25rem;
  border: none;
  font-size: 0.875rem;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  margin-left: 4%;
}

.button2:hover {
  background-color: rgba(0, 141, 255, 1);
  /* padding: 1.3vh 4.6vh; */
  /* padding: 0.4vh 4.6vh; */
  transform: scale(1.05);
}

.button2:active {
  background-color: rgba(0, 141, 255, 1);
  /* padding: 1.3vh 4.6vh; */
  /* padding: 0.4vh 4.6vh; */
  transform: scale(1.05);
}

.plat_total {
  display: flex;
  height: 100%;
  width: 100%;
  margin-top: 1%;
  flex-direction: column;
}

.plat-form {
  /* margin-top:2%; */
  display: flex;
  height: 33%;
  width: 100%;
  margin-left: 1.1%;
  flex-direction: column;
}

.exit_button {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 8%;
  width: 100%;
}

.title_plat {
  display: flex;
  width: 30%;
  height: 1.5625rem;
  margin: 1.3125rem 0 0 3.4375rem;
  line-height: 1.5625rem;
  font-size: 1.125rem;
  /* 调整为你需要的标题大小 */
  font-family: AlibabaPuHuiTi_2_65_Medium;
  align-self: left;
  color: #ffffff;
  /* 你可以根据页面风格选择合适的颜色 */
}

.title_right {
  width: 50%;
  height: 1.5625rem;
  margin: 2.5625rem 0 1.5rem 3.4375rem;
}

.image_1 {
  width: 1.5625rem;
  height: 0.9375rem;
  margin-top: 0.3125rem;
}

.text1 {
  width: 18.875rem;
  height: 1.5625rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.5625rem;
  margin-left: 0.5625rem;
}

.title_right1 {
  width: 50%;
  align-items: left;
  height: 1.5625rem;
  margin: 2.5625rem 0 0.5rem 3.5rem;
}

.image_2 {
  width: 1.5625rem;
  height: 0.9375rem;
  margin-top: 0.3125rem;
}

.text2 {
  width: 18.875rem;
  height: 1.5625rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.5625rem;
  margin-left: 0.5625rem;

}



.form-item2 {
  display: flex;
  width: 100%;
  height: 5.07%;
  justify-content: flex-start;
  margin: 1.75rem 0 0 0;
  align-items: center;
}

.form-item2 label {
  width: 30%;
  text-align: right;
  font-size: 0.975rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  white-space: nowrap;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 1);
}

.text_form {
  width: 100%
}

.num_l {
  color: rgba(255, 255, 255, 1);
  margin-left: 3%;
  font-size: 0.875rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
}

.platform {
  height: 11.25rem;
  width: 60.7rem;
  margin: 0.7rem 0 0 3.4375rem;
  font-size: 0.875rem;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}
</style>